<template>
<div>
  <i class="el-icon-rank fullscreen-button" @click="toggleFullscreen"></i>
</div>
</template>

<script>
export default {
 // 组件名称
 name: 'demo',
 // 组件参数 接收来自父组件的数据
 props: [],
 components: {},
 data () {
 return {
  // 设置flag用于判断是否进入全屏
      flag:0
}
 },
 computed: {},
 watch: {},
 methods: {
  // 点击按钮触发的方法
    toggleFullscreen() {
      this.flag++;
      this.flag % 2 == 0
        ? this.outFullCreeen(document)
        : this.FullCreeen(document.documentElement);
    },
    // 进入全屏的方法
    FullCreeen(element) {
      let el = element;
      let rfs =
        el.requestFullScreen ||
        el.webkitRequestFullScreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullScreen;
        // Element.requestFullscreen() 此方法用于发出异步请求使元素进入全屏模式。
        // 调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，
        // document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件。
      if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
      } else if (typeof window.ActiveXObject != "undefined") {
        let wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }
    },
	//退出全屏的方法
    outFullCreeen(element) {
      let el = element;
      let cfs =
        el.cancelFullScreen ||
        el.webkitCancelFullScreen ||
        el.mozCancelFullScreen ||
        el.exitFullScreen;
      if (typeof cfs != "undefined" && cfs) {
        cfs.call(el);
      } else if (typeof window.ActiveXObject != "undefined") {
        let wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }
    }
},
 beforeCreate () {
 },
 created () {
 },
 beforeMount () {
 },
 mounted () {
 },
}
</script> 
<style scoped>

</style>
